<template>
  <div>
    <!-- 导航部分开始 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>生产管理</el-breadcrumb-item><el-breadcrumb-item>工序设置</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 导航部分结束 -->
    <!-- 搜索栏开始 -->
    <el-form style="margin-top: 15px;" :inline="true" :model="queryProcess" class="demo-form-inline">
      <el-form-item label="工序编码">
        <el-input v-model="queryProcess.processCode" placeholder="请输入工序编码" clearable />
      </el-form-item>
      <el-form-item label="工序名称">
        <el-input v-model="queryProcess.processName" placeholder="请输入工序名称" clearable />
      </el-form-item>
      <el-form-item label="是否启用">
        <el-select v-model="queryProcess.enableFlag" placeholder="请选择是否启用">
          <el-option label="是" value="y" />
          <el-option label="否" value="n" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadProcesses">搜索</el-button>
        <el-button @click="resettingdefect">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 搜索栏结束 -->
    <!-- 工具栏开始 -->
    <div class="flex">
      <el-button title="新增工序" @click="this.addProcessDialogVisible = true" type="primary"><el-icon>
          <Plus />
        </el-icon></el-button>
      <el-button @click="handlerDeleteDicts" title="删除选中工序" type="primary"><el-icon>
          <Delete />
        </el-icon></el-button>
      <el-button @click="handlerEditDicts" title="导出工单" type="primary"><el-icon>
          <Download />
        </el-icon></el-button>
    </div>
    <!-- 工具栏结束 -->
    <!-- 表格 开始 -->
    <el-table ref="processTable" :data="processes" stripe="true" border="true" style="width: 100%;margin-top: 10px;">
      <el-table-column type="selection" width="55" />
      <el-table-column label="#" property="processId" />
      <el-table-column label="工序编码" property="processCode">
        <template #default="scope">
          <el-link type="success" @click="showProcessData(scope.row.processId)">
            {{ scope.row.processCode }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="工序名称" property="processName" />
      <el-table-column label="是否启用" property="enableFlag">
        <template #default="scope">
          <!-- scope.row 就是整行数据-->
          <el-tag v-if="scope.row.enableFlag == 'y'" class="ml-2" type="success">是</el-tag>
          <el-tag v-else class="ml-2" type="danger">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="备注" property="remark" />
      <el-table-column width="150" align="center" label="操作">
        <template #default="scope">
          <el-button size="small" @click="showProcessContent(scope.row)">修改</el-button>
          <el-popconfirm confirm-button-text="是" cancel-button-text="点错了" @confirm="handleDelete(scope.row)"
            title="您是否要删除这行数据">
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 结束 -->
    <!-- 分页栏开始 -->
    <el-pagination style="margin-top: 15px;" :page-size="processLimit" :pager-count="processMaxPage"
      @current-change="changePage" background layout="prev, pager, next" :total="processTotal" />
    <!-- 分页栏结束 -->

    <!-- 添加工序的弹窗窗体开始-->
    <el-dialog v-model="addProcessDialogVisible" title="添加工序" width="1000" align-center>
      <!-- 添加工序的表单 -->
      <el-form label-width="100px" :model="newProcess" style="max-width: 960px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="工序编号">
              <el-input v-model="newProcess.processCode" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工序名称">
              <el-input v-model="newProcess.processName" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否启用">
              <el-radio-group v-model="newProcess.enableFlag">
                <el-radio label="y">是</el-radio>
                <el-radio label="n">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="工序说明">
          <el-input type="textarea" :rows="3" v-model="newProcess.attention" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="newProcess.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelAddProcess">取消</el-button>
          <el-button type="primary" @click="doAddProcess">
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 添加工序的弹窗窗体结束-->

    <!-- 编辑工序的弹窗开始-->
    <el-dialog v-model="processContentManagerDialogVisible" title="编辑工序步骤" width="80%" align-center>
      <template #default>
        <div>
          <!-- 编辑工序的表单 -->
          <el-form label-width="100px" :model="editProcess" style="max-width: 960px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="工序编码">
                  <el-input v-model="editProcess.processCode" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="工序名称">
                  <el-input v-model="editProcess.processName" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否启用">
                  <el-radio-group v-model="editProcess.enableFlag">
                    <el-radio label="y">是</el-radio>
                    <el-radio label="n">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="工序说明">
              <el-input type="textarea" :rows="3" v-model="editProcess.attention" />
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" :rows="2" v-model="editProcess.remark" />
            </el-form-item>
          </el-form>
        </div>
        <el-divider>操作步骤</el-divider>
        <!-- 工具栏开始 -->
        <div class="flex">
          <el-button title="新增操作步骤" @click="this.addProcessContentDialogVisible = true" type="primary"><el-icon>
              <Plus />
            </el-icon></el-button>
          <el-button @click="handlerDeleteDicts" title="删除选中工序" type="primary"><el-icon>
              <Delete />
            </el-icon></el-button>
          <el-button @click="handlerEditDicts" title="导出工单" type="primary"><el-icon>
              <Download />
            </el-icon></el-button>
        </div>
        <!-- 工具栏结束 -->
        <!-- 操作步骤表格 开始 -->
        <el-table ref="processContentTable" :data="processcontents" stripe="true" border="true"
          style="width: 100%;margin-top: 10px;">
          <el-table-column align="center" type="selection" width="55" />
          <el-table-column align="center" label="#" property="contentId" />
          <el-table-column align="center" label="顺序编号" property="orderNum" />
          <el-table-column align="center" label="步骤说明" property="contentText" />
          <el-table-column align="center" label="辅助设备" property="device" />
          <el-table-column align="center" label="辅助材料" property="material" />
          <el-table-column align="center" label="备注" property="remark" />
          <el-table-column width="150" align="center" label="操作">
            <template #default="scope">
              <el-button size="small" @click="EditProcessContent(scope.row)">编辑</el-button>
              <el-popconfirm confirm-button-text="是" cancel-button-text="点错了" @confirm="handleProcessContentDelete(scope.row)"
                title="您是否要删除这行数据">
                <template #reference>
                  <el-button size="small" type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 操作步骤表格结束 -->
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelEdit">取消</el-button>
          <el-button type="primary" @click="doProcessEdit">提交</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑工序的弹窗弹窗结束-->

    <!-- 展示工序详情信息的弹窗开始-->
    <el-dialog v-model="processDataManagerDialogVisible" title="查看工序信息" width="80%" align-center>
      <template #default>
        <div>
          <!-- 工序的表单 -->
          <el-form label-width="100px" :model="editProcess" style="max-width: 960px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="工序编码">
                  <el-input v-model="editProcess.processCode" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="工序名称">
                  <el-input v-model="editProcess.processName" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否启用">
                  <el-radio-group v-model="editProcess.enableFlag">
                    <el-radio label="y">是</el-radio>
                    <el-radio label="n">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="工序说明">
              <el-input type="textarea" :rows="3" v-model="editProcess.attention" />
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" :rows="2" v-model="editProcess.remark" />
            </el-form-item>
          </el-form>
        </div>
        <el-divider>操作步骤</el-divider>
        <!-- 工序数据表格 开始 -->
        <el-table ref="processContentTable" :data="processcontents" max-height="800px" stripe="true" border="true"
          style="width: 100%;margin-top: 10px;">
          <el-table-column align="center" type="selection" width="55" />
          <el-table-column align="center" label="#" property="contentId" />
          <el-table-column align="center" label="顺序编号" property="orderNum" />
          <el-table-column align="center" label="步骤说明" property="contentText" />
          <el-table-column align="center" label="辅助设备" property="device" />
          <el-table-column align="center" label="辅助材料" property="material" />
          <el-table-column align="center" label="备注" property="remark" />
        </el-table>
        <!-- 工序数据表格结束 -->
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelEdit">返回</el-button>
          <el-button type="primary" @click="cancelEdit">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 展示工序详情信息的弹窗结束-->

    <!-- 添加操作步骤的弹窗窗体开始-->
    <el-dialog v-model="addProcessContentDialogVisible" title="添加操作步骤" width="1000" align-center>
      <!-- 添加操作步骤的表单 -->
      <el-form label-width="100px" :model="newProcessContent" style="max-width: 900px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="顺序编号">
              <el-input-number v-model="newProcessContent.orderNum" :step="1" :min="1" :max="10" placeholder="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="材料URL">
              <el-input v-model="newProcessContent.docUrl" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="辅助设备">
              <el-input v-model="newProcessContent.device" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="辅助材料">
              <el-input v-model="newProcessContent.material" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="步骤说明">
          <el-input type="textarea" :rows="3" v-model="newProcessContent.contentText" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" :rows="2" v-model="newProcessContent.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelAddProcessContent">取消</el-button>
          <el-button type="primary" @click="doAddProcessContent">
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 添加操作步骤弹窗窗体结束-->

    <!-- 编辑操作步骤的弹窗窗体开始-->
    <el-dialog v-model="editProcessContentDialogVisible" title="编辑操作步骤" width="1000" align-center>
      <!-- 编辑操作步骤的表单 -->
      <el-form label-width="100px" :model="editProcessContent" style="max-width: 900px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="顺序编号">
              <el-input-number v-model="editProcessContent.orderNum" :step="1" :min="1" :max="10" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="材料URL">
              <el-input v-model="editProcessContent.docUrl" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="辅助设备">
              <el-input v-model="editProcessContent.device" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="辅助材料">
              <el-input v-model="editProcessContent.material" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="步骤说明">
          <el-input type="textarea" :rows="3" v-model="editProcessContent.contentText" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" :rows="2" v-model="editProcessContent.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelEditProcessConten">取消</el-button>
          <el-button type="primary" @click="doProcessContentEdit">
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑操作步骤的弹窗窗体结束-->
  </div>
</template>
<script>
import processRquest from '../../../api/process-api';
import processContentRequest from '../../../api/processContent-api';
import tools from '../../../util/tools';
export default {
  data() {
    return {
      queryProcess: {}, // 分装查询工序条件的工序对象
      processes: [],// 工序数据列表
      processCurrPage: 1, // 工序分页的当前页码
      processLimit: 10, // 工序分页的每页大小
      processTotal: 0, // 工序列表的总条数
      processMaxPage: 1,//工序列表的最大页码
      // 新增工序相关属性
      addProcessDialogVisible: false,// 新增工序的弹窗标志
      newProcess: {},
      editProcess: {},
      // 工序步骤数据管理相关属性
      processContentManagerDialogVisible: false,//工序数据管理的弹窗标志
      addProcessContentDialogVisible: false,// 新增工序数据的弹窗标志
      processcontents: [],// 工序步骤数据列表
      newProcessContent: {},
      currContent: {},

      processDataManagerDialogVisible: false,//工序详情信息的弹窗标志


      editProcessContent: {},//编辑操作步骤
      editProcessContentDialogVisible: false,//编辑操作步骤的弹窗


      status: ['y', 'n']
    }
  },
  methods: {
    /**
         * 删除操作步骤的事件
         * @param {*} row 
         */
    handleProcessContentDelete(row) {
      processContentRequest.delete(row.contentId, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.loadProcessContent(row.processId);
        } else {
          this.$message({
            type: "error",
            message: "删除失败"
          });
        }
      })
    },
    /**
* 点击工序编码，显示工序详情信息
* @param {*} processId
*/
    showProcessData(processId) {
      processRquest.get(processId, res => {
        this.editProcess = res.data;
      });
      this.processDataManagerDialogVisible = true;
      this.loadProcessContent(processId);
    },
    /**
         * 点击编辑的事件，数据管理
         * @param {*} row 
         */
    EditProcessContent(row) {
      processContentRequest.get(row.contentId, res => {
        this.editProcessContent = res.data;
      });
      this.editProcessContentDialogVisible = true;
      this.loadProcessContent(row.processId);
      //this.currContent = row;
    },
    /**
     * 取消造作步骤编辑操作
     */
    cancelEditProcessConten() {
      // 将编辑的工序制空
      this.editProcessContent = {};
      // 关闭弹窗
      this.editProcessContentDialogVisible = false;
    },
    /**
        * 操作步骤编辑提交按钮事件
        */
    doProcessContentEdit() {
      // 提交editProcess即可
      processContentRequest.edit(this.editProcessContent, res => {
        // 这里的res就是我们的后端返回的perResult对象
        if (res.code == '200') {
          this.$message({
            message: '编辑成功',
            type: 'success'
          });
          //关闭窗体
          this.editProcessContentDialogVisible = false;
          // 重新加载数据
          this.loadProcessContent(this.editProcessContent.processId);
          // 将editUser制空
          this.editProcessContent = {};
        } else if (res.code == '300') {
          this.$message({
            message: '用户名重复',
            type: 'warning',
          });
        } else {
          this.$message({
            message: '编辑失败',
            type: 'error',
          });
        }
      });
    },
    /**
 * 加载操作步骤数据列表
 * @param {*} processId
 */
    loadProcessContent(processId) {
      processContentRequest.list(processId, res => {
        this.processcontents = res.data;
      });
    },
    /**
 * 点击工序编辑的事件，显操作步骤数据管理窗体
 * @param {*} processId
 */
    showProcessContent(row) {
      processRquest.get(row.processId, res => {
        this.editProcess = res.data;
      });
      this.processContentManagerDialogVisible = true;
      this.loadProcessContent(row.processId);
      this.currContent = row;
    },
    /**
        * 工序编辑提交按钮事件
        */
    doProcessEdit() {
      console.log(this.editProcess);
      // 提交editProcess即可
      processRquest.edit(this.editProcess, res => {
        // 这里的res就是我们的后端返回的perResult对象
        if (res.code == '200') {
          this.$message({
            message: '编辑用户成功',
            type: 'success'
          });
          //关闭窗体
          this.processContentManagerDialogVisible = false;
          // 重新加载数据
          this.loadProcesses();
          // 将editUser制空
          this.editProcess = {};
        } else if (res.code == '300') {
          this.$message({
            message: '用户名重复',
            type: 'warning',
          });
        } else {
          this.$message({
            message: '编辑失败',
            type: 'error',
          });
        }
      });
    },
    /**
 * 新增操作步骤的提交按钮事件
 */
    doAddProcessContent() {
      // 数据校验：略
      // 提交数据
      this.newProcessContent.processId = this.currContent.processId;
      console.log(this.newProcessContent);
      processContentRequest.save(this.newProcessContent, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "保存成功"
          });
          // 关闭窗体
          this.cancelAddProcessContent();
          // 重新加载数据
          this.loadProcessContent(this.currContent.processId);// 加载当前页
        } else if (res.code == 300) {
          this.$message({
            type: "warning",
            message: res.msg
          });
        } else {
          this.$message({
            type: "error",
            message: "保存失败"
          });
        }
      });
    },
    /**
     * 取消新增工序的按钮事件
     */
    cancelAddProcessContent() {
      // 关闭窗体
      this.addProcessContentDialogVisible = false;
      // 清空newProcessContent
      this.newProcessContent = {};
    },
    /**
     * 取消编辑操作
     */
    cancelEdit() {
      // 将编辑的工序制空
      this.editProcess = {};
      // 关闭弹窗
      this.processContentManagerDialogVisible = false;
      this.processDataManagerDialogVisible = false;
    },
    /**
         * 行编辑按钮事件
         * @param {*} row 整行数据
         */
    handleDelete(row) {
      processRquest.delete(row.processId, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.loadProcesses();
        } else {
          this.$message({
            type: "error",
            message: "删除失败"
          });
        }
      })
    },
    /**
     * 时间毫秒数转换为对应的字符串
     * @param {*} time
     */
    timeFormatter(row, column, time) {
      return tools.timeMillisToString(time);
    },
    /**
     * 字典列表的翻页函数
     * @param {} value 最新页码
     */
    changePage(value) {
      this.processCurrPage = value;
      this.loadProcesses();
    },
    /**
     * 加载工序数据
     */
    loadProcesses() {
      processRquest.list(this.processCurrPage, this.processLimit,
        this.queryProcess, res => {
          // 设置数据
          this.processes = res.data.list;
          this.processTotal = res.data.total;
          this.processMaxPage = res.data.pages;
        });
    },
    //重置操作
    resettingdefect() {
      // 将newUser制空
      this.queryProcess = {};
      this.loadProcesses();

    },
    /**
 * 新增工序的提交按钮事件
 */
    doAddProcess() {
      // 数据校验：略
      // 提交数据
      processRquest.save(this.newProcess, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "保存成功"
          });
          // 关闭窗体
          this.cancelAddProcess();
          // 重新加载数据
          this.loadProcesses();// 加载当前页
        } else if (res.code == 300) {
          this.$message({
            type: "warning",
            message: res.msg
          });
        } else {
          this.$message({
            type: "error",
            message: "保存失败"
          });
        }
      });
    },
    /**
     * 取消新增字典的按钮事件
     */
    cancelAddProcess() {
      // 关闭窗体
      this.addProcessDialogVisible = false;
      // 清空newDict
      this.newProcess = {};
    },

  },
  mounted() {
    // 默认加载字典数据列表
    this.loadProcesses();
  }
}
</script>